<script>
import api from './components/api.js';
import List from './components/List.vue';
import Cart from './components/Cart.vue';
import { ElMessage } from 'element-plus'

export default {
  components: {
    List,
    Cart
  },
  data() {
    return {
      isLoggedIn: false, // 假设用户初始状态为未登录
      dialogFormVisible: false, // 是否显示登录对话框
      selectedMenu: List, // 默认显示 HTML
      form: {
        username: '',
        password: ''
      },
      userInfo: {
        id: 0,
        username: 'anonymous',
        password: ''
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          this.selectedMenu = List;
          break;
        case '2':
          this.selectedMenu = Cart;
          break;
      }
    },
    handleLogin() {
      // 处理登录逻辑
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      api.loginUser(user)
        .then(response => {
          // 登录成功，处理响应
          console.log(response.data);
          user.id = response.data.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          // 登录失败，处理错误
          ElMessage("密码错误，请重新输入！");
          console.error(error);

        });
    },
    handleRegister() {
      // 处理注册逻辑
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      api.registerUser(user)
        .then(response => {
          // 注册成功，处理响应
          user.id = response.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          // 注册失败，处理错误
          ElMessage("注册失败，已有该用户");
          console.error(error);
        });
    },
    openDialog() {
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    handleLogout() {
    this.isLoggedIn = false; // 将登录状态重置为false
    this.userInfo = {
      id: 0,
      username: 'anonymous',
      password: ''
    }; // 重置用户信息
    ElMessage("您已成功退出登录"); 
    }
  }
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="logo">
            <img src="./img/logo.png" class="logo-img" alt="logo" />
            <el-text class="logo-text">简易点餐系统</el-text>
          </div>
          <div class="userInfo">
            <el-dropdown v-if="isLoggedIn">
              <span class="el-dropdown-link">
                {{ userInfo.username }}
              </span>
              <template #dropdown>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>查看个人信息</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div v-else>
              <el-button type="info" round class="custom-button" @click="openDialog">登录</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item index="1">精品餐谱</el-menu-item>
            <el-menu-item index="2">我的点餐</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <component :is="selectedMenu" :is-logged-In="isLoggedIn" :user-info="userInfo"></component>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog v-model="dialogFormVisible" title="登录/注册" width="500" class="dialog">
      <el-form :model="form" class="dialog-form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleLogin">登录</el-button>
          <el-button type="primary" @click="handleRegister">注册</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.common-layout {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8; /* 调整为更护眼的淡色调 */
}

.el-header,
.el-aside,
.el-dialog,
.el-menu {
  background-color: #f8f8f8; /* 统一设置为护眼的淡色调 */
}

.el-main,
.el-container {
  background-color: #f1f1f1; /* 保持或微调以适应整体风格 */
}
</style>